<template>
  <n-layout embedded content-style="padding: 10px;">
    <n-divider></n-divider>
    <n-space vertical align="center">
      <n-tag v-if="!info.record" type="success">未有任务计时</n-tag>
      <template v-if="info.record">
        <n-space align="center">
          <n-tag type="error"> 当前计时任务：{{ info.taskName }}</n-tag>
          <n-tag type="error" v-if="info.stageName"> 阶段：{{ info.stageName }}</n-tag>
          <n-tag type="error"> 领域/生活模式：{{ info.fieldName }}</n-tag>
          <n-tag type="error" v-if="info.stageName"> 目标：{{ info.goalName }}</n-tag>
        </n-space>
      </template>
      <n-space>
        <n-gradient-text :size="20" type="error" v-if="info.record">
          开始计时时间：
        </n-gradient-text>
        <MyDatePicker v-model:time="surfaceSetting.recordStartTime" v-if="info.record" />
      </n-space>
      <n-gradient-text :size="20" type="info" v-if="!info.record">暂无计时任务</n-gradient-text>
      <n-gradient-text :size="20" type="error" v-if="info.record">
        目前已计时：{{ count }}
      </n-gradient-text>
    </n-space>
    <n-divider></n-divider>
    <n-space justify="center">
      <n-button :disabled="!info.record" @click="endRecord()">
        结束计时</n-button>
      <n-button :disabled="!info.record" @click="cancelRecord()">
        取消计时</n-button>
    </n-space>
  </n-layout>
  <TaskLogEditDrawer v-model="formData"></TaskLogEditDrawer>
</template>

<script lang="ts" setup>
// 全局数据

import { post, Response } from "@/api/http";
import { changeTaskState, endTaskRecord, getTaskRecordInfo } from "@/api/url";
import useUserStore from "@/store/modules/user";
import { reactive, ref, computed, watch, onMounted } from "vue";
import { TaskData, TaskLogData } from "@/views/model/model";
import { useMessage } from "naive-ui";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import { changeTimeUnit } from "@/utils";
import TaskLogEditDrawer from "@/views/taskoperation/tasklog/TaskLogEditDrawer.vue";
import MyDatePicker from "@/views/task/time/MyDatePicker.vue";
const userStore = useUserStore()
const message = useMessage();
const useSurfaceSetting = UseSurfaceSettingStore()
const surfaceSetting = useSurfaceSetting.getSurfaceSetting()

// const timeStr = ref("2023-12-30 00:00:00")

// 父组件数据
const props = defineProps<{ modelValue: { key: number, [key: string]: any } }>();
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val),
});

interface RecordInfoData {
  taskId: number
  taskName: string
  startTime: number
  record: boolean
  recordType: number
  stageId: number
  stageName: string
  fieldId: number
  fieldName: string
  goalId: number
  goalName: string
}
const formData = reactive({
  show: false,
  key: Date.now(),
  data: TaskLogData.getNewTaskLogData()
})
const info = ref<RecordInfoData>({
  taskId: 0.,
  taskName: '',
  startTime: 0,
  record: false,
  recordType: 0,
  stageId: 0,
  stageName: '',
  fieldId: 0,
  fieldName: '',
  goalId: 0,
  goalName: '',
})
const name = ref<string>("");
const count = ref<string>("");

const timezone = computed(() => {
  return userStore.timezone;
})

// 记时面板信息
const getInfoFromBack = async () => {
  try {
    const data: Response = await post({
      url: getTaskRecordInfo,
      token: userStore.getToken()
    });
    message.success(data.msg)
    info.value = { ...data.data.data }
  } catch (e) {
    message.error((e as Error).message)
  } finally {
  }
}
const getTaskName = async () => {
  let showName = "";
  if (info.value.record) {

  }
  name.value = showName;
};
watch(modelValue, getInfoFromBack)
onMounted(getInfoFromBack)
onMounted(getTaskName)
watch(surfaceSetting, async () => {
  if (surfaceSetting.recordWarning) {
    await getInfoFromBack()
    surfaceSetting.recordWarning = false
  }
})

const endRecord = async () => {
  try {
    const data: Response = await post({
      url: endTaskRecord,
      data: { id: surfaceSetting.recordTaskId, endTime: Date.now() },
      token: userStore.getToken()
    });
    if (surfaceSetting.recordStartTime)
      info.value.startTime = surfaceSetting.recordStartTime
    cancelRecord()
    formData.data = data.data.data
    formData.show = true
    // message.success(data.msg)
    // info.value = {...data.data.data}
  } catch (e) {
    message.error((e as Error).message)
  } finally {
  }
};
const cancelRecord = () => {
  surfaceSetting.record = false;
  info.value.record = false;
};
// 计时
function foo() {
  if (info.value.record) {
    if (surfaceSetting.recordStartTime) {
      count.value = changeTimeUnit(new Date().getTime() - surfaceSetting.recordStartTime);
    }
    if (count.value.length === 0) count.value = "0分钟";
    // console.log(count.value)
  }
}
setInterval(foo, 1000); // 每隔1秒执行foo函数
</script>
